<script setup lang="ts">
import { AddProcurementForm } from "@/api/procurement/type/procurementForm";
import { ref } from "vue";

// 声明 props 类型
export interface FormProps {
  addProcurementForm?: AddProcurementForm;
}

// 声明 props 默认值
// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
const props = withDefaults(defineProps<FormProps>(), {
  addProcurementForm: () => ({})
});

// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
const newAddProcurementForm = ref(props.addProcurementForm);
</script>

<template>
  <el-form :model="newAddProcurementForm">
    <!-- 第一行：单号 + 运费 -->
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="单号">
          <el-input v-model="newAddProcurementForm.code" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="卸货方式">
          <el-select
            v-model="newAddProcurementForm.typeFlag"
            placeholder="请选择卸货方式"
          >
            <el-option label="机械" value="0" />
            <el-option label="人工" value="1" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第二行：供应商 + 到货方式 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="供应商">
          <el-select
            v-model="newAddProcurementForm.supplierId"
            placeholder="请选择供应商"
          >
            <el-option label="天筑" value="1781" />
            <el-option label="张建启" value="1778" />
            <el-option label="开封昐盼" value="1774" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="到货方式">
          <el-select
            v-model="newAddProcurementForm.arrivalId"
            placeholder="请选择供应商"
          >
            <el-option label="自提" value="111" />
            <el-option label="送货" value="112" />
            <el-option label="物流送货" value="113" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第三行：提货车牌 + 订单状态 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="订单id">
          <el-input v-model="newAddProcurementForm.saleOrderId" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="订单状态">
          <el-select
            v-model="newAddProcurementForm.statusFlag"
            placeholder="请选择订单状态"
          >
            <el-option label="草稿" value="1" />
            <el-option label="待入库" value="2" />
            <el-option label="已完成" value="3" />
            <el-option label="存档" value="4" />
            <el-option label="驳回" value="5" />
            <el-option label="已结算" value="6" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第四行：仓库 + 入库类型 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="仓库">
          <el-select
            v-model="newAddProcurementForm.storeId"
            placeholder="请选择仓库"
          >
            <el-option label="仓库1" value="1" />
            <el-option label="仓库2" value="2" />
            <el-option label="仓库3" value="3" />
            <el-option label="仓库4" value="4" />
            <el-option label="仓库5" value="5" />
            <el-option label="仓库6" value="6" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="入库类型">
          <el-select
            v-model="newAddProcurementForm.typeFlag"
            placeholder="请选择仓库"
          >
            <el-option label="采购入库" value="0" />
            <el-option label="一般入库" value="1" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第五行：卸货方式 + 临时货位 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="运费">
          <el-input v-model="newAddProcurementForm.freight" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="临时货位">
          <el-input v-model="newAddProcurementForm.storeSiteName" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第六行：备注 + 订单id（独占一行，通过colspan合并） -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="备注">
          <el-input v-model="newAddProcurementForm.remark" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="提货车牌">
          <el-select
            v-model="newAddProcurementForm.pickUpCarId"
            placeholder="请选择提货车牌"
          >
            <el-option label="叉车" value="1" />
            <el-option label="鄂AOUJ02" value="2" />
            <el-option label="鄂A6588V" value="3" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
